<template>
    <div class="form-box">
        <h3>申请理赔</h3>

        <el-form ref="form" v-bind:model="form" v-bind:rules="rules" label-width="80px">
            <el-form-item label="我的保单" prop="baodanid">
                <el-select v-model="form" value-key="bdId" placeholder="请选择保单" style="margin-right: 100px">
                    <el-option
                            v-for="ins in insurances"
                            :key="ins.bdId"
                            :label="ins.combinedName+'：'+ins.insuranceName+'：'+ins.bdId"
                            :value="ins">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item  label="报案日期" prop="date">
                <el-date-picker
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="form.date"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item  label="详情原因" prop="textarea">
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="form.textarea">
                </el-input>
            </el-form-item>
            <el-upload
                    ref="upload"
                    style="display: inline"
                    drag
                    action=""
                    :before-upload="beforeUploadHandle"
                    :http-request="handleUploadForm"
                    :auto-upload="false"
                    multiple
                    :limit="5">
                <el-link icon="el-icon-paperclip" type="primary">添加需要上传的文件</el-link>
            </el-upload>


            <el-form-item class="flex-btn">
                <el-button type="primary" @click="addFile">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "shenqing",
    data() {
        return {
            insurances: [],
            fileList: [],   // upload多文件数组
            form: {
                bdId:'',
                date:null,
                textarea:'',
                type:'',
            },
            file:[]
        }
    },
    created() {
        this.initInsurance();
    },
    methods: {
        initInsurance(){
            let vm = this;
            this.axios({
                url: '/myapi/user/list/buyResp/'+vm.$store.state.id,
                method: 'get'
            }).then(function (response) {
                if(response.data.success === true){
                    vm.insurances = response.data.content;
                    console.log(vm.insurances);
                }
                else {
                    vm.$message.error('获取列表失败');
                }
            });
        },
        addFile(){
            //手动提交
            //this.$refs.upload.submit();
            let vm = this;
            var upData = new FormData();
            this.$refs.upload.submit();// 这里是执行文件上传的函数，其实也就是获取我们要上传的文件
            this.file.forEach(function (file) {// 因为要上传多个文件，所以需要遍历
                upData.append('file', file, file.name);
                // upData.append('file', this.file); //不要直接使用我们的文件数组进行上传，你会发现传给后台的是两个Object
            })
            //upData.append("body", JSON.stringify(this.newData)); // 这里需要转换一下格式传给后台
            upData.append('date', this.form.date)
            upData.append('bdid', this.form.bdId)
            upData.append('uid', this.$store.state.id)
            upData.append('textarea', this.form.textarea)
            upData.append('type',this.form.type)
            vm.$axios.post('/myapi/user/claim/addClaim',upData)
                    .then((res) => {
                        if (res.data.success === true) {
                            vm.$message.success('申请成功');
                            vm.$router.push('/home/service');
                            //thisInfo.open = false;
                            //thisInfo.getFileList();
                        } else {
                            vm.$message.success('申请失败')
                        }
                    })


        },
        handleUploadForm(param) {
            this.file.push(param.file);
            /*            let thisInfo = this
                        let formData = new FormData()
                        // 在formData中加入我们需要的参数
                        formData.append('files', param.file)
                        formData.append('date', this.form.date)
                        formData.append('bdid', this.form.ins_id)
                        formData.append('uid', this.$store.state.id)
                        formData.append('textarea', this.form.textarea)
                        // 向后端发送数据
                        thisInfo.$axios.post('/myapi/user/claim/addClaim', formData).then((res) => {
                            if (res.data.success === true) {
                                thisInfo.$message.success('申请成功');
                                //thisInfo.open = false;
                                //thisInfo.getFileList();
                            } else {
                                thisInfo.$message.success('申请失败')
                            }
                        })*/
        },

        beforeUploadHandle(file) {
            // 以检查文件是否为.jpg为例
            const fileName = file.name;
            const fileType = fileName.substring(fileName.lastIndexOf('.'));
            if (fileType === ".jpg" || fileType === ".png") {
                return true;
            }
            this.$message.error("只支持上传图片！");
            return false;
        },
    }
}
</script>

<style scoped>
.form-box{
    width: 400px;
    height: 750px;
    margin: 50px auto;
    padding: 10px 50px 20px 20px;

}
.flex-btn{
    float: left;
}
</style>
